<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:p="http://primefaces.org/ui"
      xmlns:f="http://java.sun.com/jsf/core">

    <ui:composition template="layout.xhtml">
        <ui:define name="body">
            <div class="section">
                <h1>Cadastrando Construtora</h1>
                <h:form id="formConstruction">
                    <p:growl id="msg" life="3000" autoUpdate="true"/>
                    <div class="container_24 clearfix">

                        <p:panel header="Dados Gerais" id="main">
                            <div class="clear" />
                            <p:outputLabel value="Nome:" styleClass="grid_3" for="Contructionname" />
                            <p:inputText styleClass="grid_12" required="true" requiredMessage="O campo nome é obrigatório." 
                                         id="Contructionname" value="#{managerCreateConstruction.construction.name}"  />
                            <p:outputLabel value="CNPJ:" styleClass="grid_3 alpha" for="cnpj" />
                            <p:inputMask mask="99.999.999/9999-99" required="true" requiredMessage="O campo CNPJ é obrigatório" 
                                         id="cnpj" styleClass="grid_5" value="#{managerCreateConstruction.construction.cnpj}" />

                            <p:outputLabel value="Razão Social:" styleClass="grid_3 companyLabel" for="campanyName"  />
                            <p:inputText styleClass="grid_12" value="#{managerCreateConstruction.construction.companyName}" 
                                         id="campanyName" required="true" requiredMessage="O campo Razão Social é obrigatório." />
                            <p:outputLabel value="Telefone:" styleClass="grid_3 alpha" for="telefone" />
                            <p:inputMask id="telefone" mask="(99)9999-9999" styleClass="grid_5" 
                                         value="#{managerCreateConstruction.construction.fone}"  />

                            <div class="clear"/>
                        </p:panel>

                        <p:panel header="Endereço" id="addressPanel">
                            <div class="clear" />
                            <p:outputLabel value="Rua:" styleClass="grid_3" for="patioInputText" />
                            <p:inputText id="patioInputText" styleClass="grid_14" value="#{managerCreateConstruction.address.patio}" />
                            <p:outputLabel value="Nº:" styleClass="grid_2 alpha" for="numInputText" />
                            <p:inputText id="numInputText" styleClass="grid_4"
                                         value="#{managerCreateConstruction.address.num}" />
                            
                            <p:outputLabel value="Bairro:" styleClass="grid_3" for="districtInputText" />
                            <p:inputText id="districtInputText" styleClass="grid_14" 
                                          value="#{managerCreateConstruction.address.district}" />
                            <div class="clear-both" />
                            
                            <p:outputLabel  value="Cidade:" styleClass="grid_3" for="cityAutoComplete" />
                            <p:autoComplete id="cityAutoComplete" styleClass="grid_14" dropdown="true" converter="#{autocompleteconverter}"   
                                            var="cityValue" itemLabel="#{cityValue.name.toString().concat(' - ')}#{cityValue.country.sgl}" 
                                            itemValue="#{cityValue}" value="#{managerCreateConstruction.city}"
                                            scrollHeight="200" forceSelection="true" 
                                            completeMethod="#{managerCity.autocomplete}">
                                <p:ajax event="itemSelect"  />  
                            </p:autoComplete>
                            <p:outputLabel value="Cep:" styleClass="grid_2" for="cepInputMask" />
                            <p:inputMask id="cepInputMask" mask="99.999-999" styleClass="grid_4" 
                                         value="#{managerCreateConstruction.address.cep}" />

                            <p:outputLabel value="Complemento:" styleClass="grid_3 complementLabel" for="complementInputText" />
                            <p:inputText id="complementInputText" styleClass="grid_20"
                                         value="#{managerCreateConstruction.address.complement}" />
                            <div class="clear-both" />

                            <p:outputLabel value="Tipo:" styleClass="grid_3" for="typeAddressSelectOneMenu" />
                            <div class="grid_14" >
                                <p:selectOneMenu id="typeAddressSelectOneMenu" panelStyle="width:150px;"
                                                 style="width: 101.5% !important"
                                                 value="#{managerCreateConstruction.address.typeAddress}">  
                                    <f:selectItem itemLabel="" itemValue="" />  
                                    <f:selectItems value="#{managerCreateCustomer.typeAddress}" />  
                                </p:selectOneMenu> 
                            </div>
                            <div class="clear"/>
                        </p:panel>

                        <p:panel header="Representantes" id="customerPanel">
                            <div class="clear" />
                            <p:outputLabel  value="Representante:" styleClass="grid_4" for="customerAutocomplete" />
                            <p:autoComplete id="customerAutocomplete" styleClass="grid_17" dropdown="true" 
                                            converter="#{autocompleteconverter}"   
                                            var="customervalue" itemLabel="#{customervalue.name}" 
                                            itemValue="#{customervalue}" value="#{managerCreateConstruction.customer}"
                                            scrollHeight="200" forceSelection="true"
                                            completeMethod="#{managerCustomer.autocomplete}" >
                                <p:ajax event="itemSelect"  process="@this" />  
                            </p:autoComplete>

                            <p:commandButton value="Novo" 
                                             styleClass="ui-priority-primary"
                                             style="margin-left: 5px; margin-top: -5px"
                                             icon="ui-icon-plusthick" 
                                             title="Adicionar Novo Corretor no Sistema"
                                             alt="Adicionar Novo Corretor no Sistema"
                                             process="@this"
                                             onclick="dlg.show()"/>
                            <div class="clear"/>

                            <div class="buttonAction">
                                <p:commandButton value="Adicionar"
                                                 actionListener="#{managerCreateConstruction.addCustomer()}"
                                                 update="tableCustomer,customerAutocomplete" 
                                                 process="@this" label="Adicionar Representante"
                                                 icon="ui-icon-plus"/>
                            </div>


                            <p:dataTable id="tableCustomer" var="customer" value="#{managerCreateConstruction.customers}" 
                                         styleClass="grid_24"
                                         rowIndexVar="rowid"
                                         emptyMessage="Nenhum registro">  
                                <f:facet name="header">
                                    Representantes
                                </f:facet>
                                <p:column headerText="Nome" width="300">  
                                    <h:outputText value="#{customer.name}"/>
                                </p:column>  
                                <p:column headerText="CPF">  
                                    <h:outputText value="#{customer.cpf}"/>
                                </p:column>
                                <p:column headerText="Telefone">  
                                    <h:outputText value="#{customer.fixedPhone}"/>
                                </p:column>
                                <p:column headerText="Opções">  
                                    <p:commandButton  styleClass="optionButton" 
                                                      update=":formConstruction:tableCustomer"
                                                      process="@this"
                                                      actionListener="#{managerCreateConstruction.removeCustomer(customer)}"
                                                      icon="ui-icon-trash"/>
                                </p:column>

                            </p:dataTable>


                            <div class="clear" />
                        </p:panel>

                        <div class="buttonAction">
                            <p:commandButton value="Salvar" 
                                             actionListener="#{managerCreateConstruction.save()}"
                                             update="@form" 
                                             process="main,addressPanel,customerPanel,@this"
                                             icon="ui-icon-disk" 
                                             styleClass="ui-priority-primary"/>

                            <p:button value="Voltar"
                                      href="indexconstruction.xhtml"
                                      icon="ui-icon-arrowreturnthick-1-w"/>

                        </div>
                    </div>

                    <!-- Dialog Corrector -->

                    <div class="container_24 clearfix" id="add">
                        <p:dialog id="addCorrector" header="Cadastrar Cliente" widgetVar="dlg"  
                                  modal="true" styleClass="dialogCustomer" height="400" maximizable="false" resizable="false">
                            <p:ajax event="close" update="addCorrector"/>
                            <h:form id="formCadastro" >
                            <p:panel id="cadastro" header="Dados Gerais">
                                <div class="clear" />
                                <p:outputLabel id="nameCustomerOutputLabel" value="Nome:" styleClass="grid_3" for="name" />
                                <p:inputText styleClass="grid_20 ajustInput" required="true" requiredMessage="Campo nome é obrigatório" 
                                             id="name" value="#{managerCreateConstruction.customer.name}" />

                                <div class="clear-both"/>
                                <p:outputLabel value="CPF:" styleClass="grid_3" for="cpf" />
                                <p:inputMask mask="999.999.999-99" styleClass="grid_8" required="true" 
                                             requiredMessage="Campo CPF é obrigatório" id="cpf" value="#{managerCreateConstruction.customer.cpf}" />
                                <p:outputLabel value="RG:" styleClass="grid_3" />
                                <p:inputText styleClass="grid_8" maxlength="12" value="#{managerCreateConstruction.customer.rg}" />

                                <div class="clear-both"/>
                                <p:outputLabel value="Sexo:" styleClass="grid_3"/>
                                <div class="grid_8">
                                    <p:selectOneMenu panelStyle="width:150px;" value="#{managerCreateConstruction.customer.gender}" >  
                                        <f:selectItem itemLabel="" itemValue="" />  
                                        <f:selectItems var="g" itemLabel="#{g.name}" itemValue="#{g}" 
                                                       value="#{managerCreateConstruction.genders}" />  
                                    </p:selectOneMenu> 
                                </div>
                                <p:outputLabel value="Profissão:" styleClass="grid_3" style="left: 10px;" />
                                <p:inputText styleClass="grid_8" value="#{managerCreateConstruction.customer.profession}" style="left: 10px;" />

                                <div class="clear-both"/>
                                <p:outputLabel value="Nacionalidade:" styleClass="grid_3 nationalityLabel"  />
                                <p:inputText styleClass="grid_8" value="#{managerCreateConstruction.customer.nationality}"/>
                                <p:outputLabel value="Estado Civil:" styleClass="grid_3 civilStatusLabel"/>
                                <div class="grid_8">
                                    <p:selectOneMenu panelStyle="width:150px;" value="#{managerCreateConstruction.customer.civilStatus}">  
                                        <f:selectItem itemLabel="" itemValue="" />  
                                        <f:selectItems var="cs" itemLabel="#{cs.name}" itemValue="#{cs}" 
                                                       value="#{managerCreateConstruction.civilStatus}" />
                                        <p:ajax update=":formConstruction:formCadastro:conj" process="@this"
                                                listener="#{managerCreateConstruction.handleStatusVisible}" />
                                    </p:selectOneMenu> 
                                </div>
                                <div class="clear-both"/>

                                <p:outputLabel value="Data Nasc.:" styleClass="grid_3 dataNascLabel" for="dataNasc"  />
                                <p:calendar showOn="button" styleClass="grid_8" 
                                            pattern="dd/MM/yyyy"
                                            required="true"
                                            id="dataNasc"
                                            requiredMessage="Campo Data de Nascimento é obrigatório"
                                            value="#{managerCreateConstruction.customer.dateOfBirth}"/>
                                <p:outputLabel value="Telefone:" styleClass="grid_3" style="left: 10px;"   />
                                <p:inputMask mask="(99)9999-9999" styleClass="grid_8" value="#{managerCreateConstruction.customer.fixedPhone}" style="left: 10px;"  />

                                <div class="clear-both"/>
                                <p:outputLabel value="Celular:" styleClass="grid_3" />
                                <p:inputMask mask="(99)9999-9999" styleClass="grid_8" value="#{managerCreateConstruction.customer.celPhone}" />
                                <p:outputLabel value="Email:" styleClass="grid_3" />
                                <p:inputText styleClass="grid_8" value="#{managerCreateConstruction.customer.email}" />
                                <div class="clear"/>
                                <br/>
                            </p:panel>
                                
                            <div class="clear"/>
                            <br/>

                            <p:panel id="address" header="Endereço" styleClass="grid_24" >
                                <div class="clear" />
                                <p:outputLabel value="Rua:" styleClass="grid_3" />
                                <p:inputText styleClass="grid_14" id="street" value="#{managerCreateConstruction.addresCustomer.patio}" />
                                <p:outputLabel value="Nº:" styleClass="grid_2 alpha" />
                                <p:inputText styleClass="grid_4" value="#{managerCreateConstruction.addresCustomer.num}" />
                                <div class="clear-both"/>

                                <p:outputLabel value="Bairro:" styleClass="grid_3" />
                                <p:inputText  styleClass="grid_14" id="district" 
                                              value="#{managerCreateConstruction.addresCustomer.district}" />
                                <div class="clear-both"/>
                                
                                <p:outputLabel  value=" Cidade:" styleClass="grid_3"  />
                                <p:autoComplete styleClass="grid_14" dropdown="true" converter="cityconverter"   
                                                var="cityValue" itemLabel="#{cityValue.name.toString().concat(' - ')}#{cityValue.country.sgl}" 
                                                itemValue="#{cityValue}" value="#{managerCreateConstruction.addresCustomer.city}"
                                                scrollHeight="200" forceSelection="true"
                                                completeMethod="#{managerCreateCustomer.autocompleteCity}" /> 
                                <p:outputLabel value="CEP:" styleClass="grid_2" />
                                <p:inputMask mask="99.999-999" styleClass="grid_4" value="#{managerCreateConstruction.addresCustomer.cep}" />

                                <p:outputLabel value="Complemento:" styleClass="grid_3 complementLabel" />
                                <p:inputText styleClass="grid_20" value="#{managerCreateConstruction.addresCustomer.complement}" />

                                <div class="clear-both"/>


                                <p:outputLabel value="Tipo:" styleClass="grid_3"/>
                                <div class="grid_14" >
                                    <p:selectOneMenu panelStyle="width:150px;"
                                                     style="width: 101.5% !important"
                                                     value="#{managerCreateConstruction.addresCustomer.typeAddress}">  
                                        <f:selectItem itemLabel="" itemValue="" />  
                                        <f:selectItems value="#{managerCreateCustomer.typeAddress}" />  
                                    </p:selectOneMenu> 
                                </div>
                                <div class="clear"/>
                                <br/>
                                <div class="buttonAction">
                                    <p:commandButton value="Adicionar"
                                                     actionListener="#{managerCreateConstruction.addAddress()}"
                                                     update=":formConstruction:formCadastro:address, :formConstruction:msg"
                                                     process=":formConstruction:formCadastro:address"
                                                     icon="ui-icon-plus"/>
                                    <p:commandButton value="Limpar" icon="ui-icon-close" 
                                                     actionListener="#{managerCreateConstruction.cleanAddress()}" 
                                                     update="address" process="@this" />
                                </div>

                                <p:dataTable id="tableAdd" var="address" value="#{managerCreateConstruction.addressesCustomer}" 
                                             styleClass="grid_24"
                                             rowIndexVar="rowid"
                                             emptyMessage="Nenhum registro">  
                                    <f:facet name="header">
                                        Endereço
                                    </f:facet>
                                    <p:column headerText="Rua" width="300">  
                                        <h:outputText value="#{address.patio}"/>
                                    </p:column>  
                                    <p:column headerText="Bairro">  
                                        <h:outputText value="#{address.district}"/>
                                    </p:column>
                                    <p:column headerText="Tipo">  
                                        <h:outputText value="#{address.typeAddress}"/>
                                    </p:column>

                                    <p:column headerText="Ação" width="75">
                                        <p:commandButton  styleClass="optionButton" 
                                                          update=":formConstruction:formCadastro:address, :formConstruction:msg"
                                                          process=":formConstruction:formCadastro:address"
                                                          actionListener="#{managerCreateConstruction.edit(address,rowid)}"
                                                          icon="ui-icon-pencil"/>
                                        <p:commandButton  styleClass="optionButton" 
                                                          update=":formConstruction:formCadastro:address, :formConstruction:msg"
                                                          process=":formConstruction:formCadastro:address"
                                                          actionListener="#{managerCreateConstruction.remove(rowid)}"
                                                          icon="ui-icon-trash"/>
                                    </p:column>
                                </p:dataTable> 
                            </p:panel>

                            <div class="clear"/>
                            <br/>
                            
                            <p:panel header="Cônjuge" id="conj" styleClass="grid_24" style="#{managerCreateConstruction.conjugeVisible? '' : 'display: none;'}" >

                                <div class="clear" />
                                <f:validateBean disabled="true" >
                                    <p:outputLabel value="CPF:" styleClass="grid_3" for="conjCpf" />
                                    <p:inputMask id="conjCpf" mask="999.999.999-99" styleClass="grid_8" 
                                                 required="#{managerCreateConstruction.conjugeVisible}" requiredMessage="CPF do Cônjuge é obrigatório"
                                                 value="#{managerCreateConstruction.conjuge.cpf}">
                                        <p:ajax event="blur" 
                                                process=":formConstruction:formCadastro:conjCpf"  
                                                update=":formConstruction:formCadastro:conj"
                                                listener="#{managerCreateConstruction.customerExist()}" />
                                    </p:inputMask>
                                    <div class="clear-both"/>
                                    <p:outputLabel id="conjNome" value="Nome:" styleClass="grid_3" for="confNameinputText" />
                                    <p:inputText id="confNameinputText" styleClass="grid_20" 
                                                 required="#{managerCreateConstruction.conjugeVisible}" requiredMessage="Nome do Cônjuge é obrigatório"
                                                 value="#{managerCreateConstruction.conjuge.name}" />

                                    <p:outputLabel id="conjRg" value="RG:" styleClass="grid_3" />
                                    <p:inputText styleClass="grid_8" maxlength="12" value="#{managerCreateConstruction.conjuge.rg}" />

                                    <p:outputLabel value="Data Nasc.:" styleClass="grid_4 dataNascLabel alpha" for="dataNascCalendar" />
                                    <p:calendar showOn="button" styleClass="grid_8"
                                                id="dataNascCalendar" pattern="dd/MM/yyyy"
                                                required="#{managerCreateConstruction.conjugeVisible}" requiredMessage="Data de Nascimento é obrigatória"
                                                value="#{managerCreateConstruction.conjuge.dateOfBirth}"/>
                                </f:validateBean>
                            </p:panel>

                            <div class="buttonAction">
                                <p:commandButton value="Salvar" 
                                                 action="#{managerCreateConstruction.saveCustomer()}"
                                                 process=":formConstruction:formCadastro" 
                                                 update=":formConstruction:formCadastro,:formConstruction:formCadastro:cadastro, :formConstruction:tableCustomer" 
                                                 icon="ui-icon-disk" onsuccess=""
                                                 styleClass="ui-priority-primary">
                                </p:commandButton>

                                <p:commandButton value="Fechar" icon="ui-icon-close"
                                                 process="@this" immediate="true" action="#{managerCreateConstruction.closeDialog}" />

                            </div>
                            </h:form>
                        </p:dialog>
                    </div>

                </h:form>
            </div>
        </ui:define>
    </ui:composition>

</html>
